window.addEventListener("load", function () {
  // 1、拿到需要操作的元素
  let oToolbar = document.querySelector(".toolbar")
  let oNav = document.querySelector(".nav")
  let oMenu = document.querySelector("#myMenu")
  let oMenuUp = document.querySelector(".menu-up")
  let oMenuDown = document.querySelector(".menu-down")
  let oTips = document.querySelector(".tips")

  // 2、初始化 fullPage
  new fullpage('#fullpage', {
    // 设置每一屏的背景颜色
    // sectionsColor: ['#0da5d6', '#2ab561', '#de8910', '#16ba9d', '#0da5d6', 'pink', 'green'],
    // 取消每一屏内容默认垂直居中
    verticalCentered: false,
    // 锚点中数组每一项的值必须跟 菜单项的 data-menuanchor 属性值一致
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage', 'sixthPage', 'lastPage'],
    // menu 属性值必须跟菜单容器 id 一致
    menu: '#myMenu',
    onLeave(origin, destination, direction) {
      if (destination.isFirst) {
        oToolbar.style.display = "block"
        oNav.style.top = '42px'
        oMenu.style.display = "none"
      } else {
        oToolbar.style.display = "none"
        oNav.style.top = '0'
        oMenu.style.display = "block"
      }

      if (destination.isLast) {
        oTips.style.display = "none"
      } else {
        oTips.style.display = "block"
      }
    }
  });

  // 3、监听菜单的点击事件
  // 滚动到上一屏
  oMenuUp.addEventListener("click", () => {
    fullpage_api.moveSectionUp();
  })
  // 滚动到下一屏
  oMenuDown.addEventListener("click", () => {
    fullpage_api.moveSectionDown();
  })

  // 4、初始化第四屏动画
  initSection4Amimation()


})

function initSection4Amimation() {
  // 1、拿到需要操作的元素
  let oLis = document.querySelectorAll(".section-four>ul>li")
  let oImgs = document.querySelectorAll(".section-four>ul>li>img")
  let oH3 = document.querySelectorAll(".section-four>ul>li>h3")

  // 2、给所有 li 添加移入移出事件
  for (let i = 0 ; i < oLis.length ; i++) {
    let item = oLis[i]
    // 移入事件
    item.addEventListener("mouseenter", () => {
      oLis[0].style.width = "20%"
      oLis[1].style.width = "20%"
      oLis[2].style.width = "20%"
      oLis[i].style.width = "60%"
      oImgs[i].style.opacity = "1"
      oH3[i].style.opacity = "0"
      if (i === 0) {
        oImgs[0].style.left = "0"
      }else if (i === 2) {
        oImgs[2].style.right = "0"
      }
    })
    // 移出事件
    item.addEventListener("mouseleave", () => {
      oLis[0].style.width = "33%"
      oLis[1].style.width = "34%"
      oLis[2].style.width = "33%"
      oImgs[i].style.opacity = "0.6"
      oH3[i].style.opacity = "1"
      if (i === 0) {
        oImgs[0].style.left = "-180px"
      }else if (i === 2) {
        oImgs[2].style.right = "-180px"
      }
    })
  }
}
